<template>
	<view class="add-wrap">
		<view class="title">建档信息</view>
		<view class="form-wrap">
			<com-form v-if="!loading" ref="myForm">
				<com-form-item
					v-model="form.height"
					label="当前身高"
					labelWidth="180rpx"
					required
					:border="false"
					unit="cm"
					placeholder="请填写身高"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.weight"
					label="当前体重"
					labelWidth="180rpx"
					required
					unit="kg"
					placeholder="请填写体重"
					inputType="number"
					:precision="1"
				/>
				
				<view class="gy-form-item-box">
					<view class="gy-form-item-label" :style="{width: '180rpx'}">
            <text class="required">*</text>测量时间
					</view>
					<view class="gy-form-item-select">
            <view
              v-if="!form.time"
              class="gy-form-item-select-show input-placeholder"
              @click.stop="showTimePicker"
            >
              请选择
            </view>
            <view
              v-else
              class="gy-form-item-select-show"
              @click.stop="showTimePicker">
              {{ form.time }}
            </view>
						<image :src="arrowRight" class="gy-form-item-select-arrow" />
					</view>
				</view>
			</com-form>
		</view>
		<view class="fixedBtn" @tap.stop="handleSave">
			<text class="name">保存</text>
		</view>
		<com-picker-new
			v-if="showPicker"
			title="测量时间"
			mode="datetime"
			:startDateTime="proxy.utils.date.format(birthdayTime, 'yyyy-MM-dd')"
			:endDateTime="proxy.utils.date.create('yyyy-MM-dd')"
			dateTimeFormat="yyyy-MM-dd"
			v-model="form.time"
			@close="showPicker = false"
		/>
	</view>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance, watch } from 'vue'
  import { addArchive } from '../../request/apis/archive'
  import dayjs from 'dayjs'
	import { useStore } from '@/store';
	import arrowRight from '@/static/icon/arrow-right.svg'
	const { proxy } : any = getCurrentInstance();
	const store = useStore();

	const myForm = ref(null)
	const loading = ref(false)
  const showPicker = ref(false)
	const form = ref({
    time: proxy.utils.date.create('yyyy-MM-dd')
  })
	const birthdayTime = ref(store.patient.current.birthday)

  const showTimePicker = () => {
    showPicker.value = true
  }
	
	const handleSave = () => {
    if(showPicker.value) return
		myForm.value.validate(() => {
      if (!form.value.time) {
        proxy.utils.uni.toast('请选择测量时间')
        return
      }
      if(form.value.height > 250 || form.value.height < 20) {
        proxy.utils.uni.toast('身高范围20-250cm，请重新输入')
        return
      }
      if(form.value.weight > 200 || form.value.weight < 2) {
        proxy.utils.uni.toast('体重范围2-200kg，请重新输入')
        return
      }
      // father_height,mother_height,father_weight,mother_weight,birth_height,birth_weight,family_short_history,genetic_height,height,weight,bmi,blood_pressure,heart_rate
      const list = Object.keys(form.value)?.filter(item => item !== 'time').map(item => {
        return {
          code: item,
          value: form.value[item],
          name: item === 'height' ? '身高' : '体重',
          type: 'basic',
          unit: item === 'height' ? 'cm' : 'kg'
        }
      })
			const now = dayjs();
      const params = {
        patientId: store.patient.current.id,
        recordDate: dayjs(form.value.time + now.format(' HH:mm:ss')).valueOf(),
        basicList: list
      }
      uni.showLoading({
        title: '保存中...',
        mask: true
      })
      addArchive(params).then(res => {
      	uni.hideLoading()
        // proxy.utils.uni.toast('记录成功')
				uni.showToast({
					title: '记录成功'
				})
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
      })
    })
	}

	watch(() => store.patient.current?.birthday, (newVal) => {
		birthdayTime.value = newVal
	})
</script>

<style scoped lang="scss">
.add-wrap {
  min-height: 100vh;
  background-color: #F3F7F8;
	padding-bottom: 202rpx;
	.title {
		color: #222222;
		font-size: 32rpx;
		font-weight: bold;
		padding: 32rpx;
	}
	.form-wrap {
		margin: 0 32rpx;
		background: #fff;
		border-radius: 16rpx;
		color: #222;
		font-size: 30rpx;
		padding: 0 32rpx;
		.gy-form-item-box {
	    min-height: 108rpx;
      border-top: 1rpx solid var(--gy-card-line-color);
			@include flex-between-center;
			.gy-form-item-label{
				color: var(--pt-text-color-title);
				font-weight: 600;
        .required{
          color: var(--gy-color-error);
          margin-right: 5rpx;
          // font-weight: 100;
        }
				.sub-label{
					font-size: var(--gy-font-size-small);
					color: var(--pt-text-color-subtitle);
					margin-right: 5rpx;
					font-weight: normal;
				}
	    }
			.gy-form-item-select {
				width: 100%;
				@include flex-between-center;
				gap: 8rpx;
				.gy-form-item-select-show {
					width: calc(100% - 30rpx);
					padding: 20rpx 0;
          text-align: right;
				}
				.gy-form-item-select-arrow {
					width: 40rpx;
					height: 40rpx;
					@include flex-end-center;
				}
			}
		}
	}
	.fixedBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 24rpx 0;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		color: #fff;
		text-align: center;
		background: #fff;
		// border-top: 1rpx solid #e5e6eb;
	
		.name {
			display: inline-block;
			width: calc(100% - 60rpx);
			padding: 22rpx 0;
			margin: 0 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			background: #00d1b6;
			border-radius: 50rpx;
		}
	}
}
</style>
